/*
 * @Author: luoqi
 * @Date: 2022-03-27 15:12:56
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-08 09:34:54
 * @Description: 
 */
import React from 'react';
import {Outlet} from 'react-router-dom';
import {Layout,Row,Col,Button,message} from 'antd'
import { LogoutOutlined } from '@ant-design/icons';
import './style.css'
import Mysider from './MySider';
import MyContent from './MyContent';
import {useNavigate} from 'react-router-dom'

import axios from '../../utils/axios'
import qs from 'qs';
import logo from '../../utils/img/logo.png'

const { Header, Content, Sider } = Layout;

const Main = () => {
  let navigate=useNavigate()
  function logout(){
    axios({
      url:'/admin/loginOut',
      method:'post',
      data:qs.stringify({
        token:sessionStorage.getItem('token')
      })
    }).then(res=>{
      console.log(res);
      //登录成功
      if(res.code=='200'){
        // //存储token
        // sessionStorage.setItem('token',res.token)
        // //页面跳转
        navigate('/login')
        message.success('退出登录成功!');
      }else{
        message.warning(res.msg);
      }
    }).catch(res=>{
      message.error('请求错误：'+res.message);
    })
  }
  return (
    <Layout className='main-box'>
      <Header>
        <div className='header'>
          <div className='title-area'>
            <div><img src={logo} alt=""  className='logo'/></div>
            <div><h2 style={{color:'#382c77',fontWeight:'bold'}}>“疾病档案”健康科普网站后台管理系统</h2></div>
          </div>
          
          <div><Button type="link" onClick={logout} icon={<LogoutOutlined />}>退出登录</Button></div>
        </div>
      </Header>
      <Layout className='bottom' style={{height:'100%'}}>
        <Sider className='sider'>
          <Mysider/>
        </Sider>
        <Layout style={{height:'100%'}}>
          <Content >
            <MyContent />
          </Content>
        </Layout>
      </Layout>
      
    </Layout>
  );
}

export default Main;
